<template>
  <!--
    	作者 WuYuseng
    	时间：2019-11-1
    	描述：区域
    -->
  <el-dialog
    title="添加可配送区域"
    v-model.sync="dialogVisible"
    width="700px"
    custom-class="area-dialog"
    :before-close="closeArea"
  >
    <div class="modal-wrapper">
      <el-cascader
        v-model="activeList"
        :options="options"
        :props="props"
        collapse-tags
        collapse-tags-tooltip
        :max-collapse-tags="3"
        clearable
        filterable
        :style="{ width: '100%' }"
      />
    </div>

    <template #footer>
      <el-button @click="closeArea">取 消</el-button>
      <el-button type="primary" @click="confirmArea">确 定</el-button>
    </template>
  </el-dialog>
</template>

<script>
import { deepClone } from "@/utils/base";
export default {
  data() {
    return {
      /*弹窗是否打开*/
      dialogVisible: false,
      /*省*/
      provinceList: [],
      /*当前选中的省*/
      activeProvinceId: [],
      /*区域*/
      options: [],
      /**选中项 */
      activeList: [],
      props: {
        multiple: true,
      },
    };
  },
  props: ["show_area", "areaModel", "areas"],
  created() {
    this.init();
  },
  methods: {
    /*初始化*/
    init() {
      this.dialogVisible = this.show_area;
      this.options = deepClone(this.areas);
      if (this.areaModel == "add") {
        this.activeList = [];
      } else {
        this.activeList = this.areaModel.activeList;
      }
      console.log(this.areaModel);
    },
    /*关闭弹窗*/
    closeArea() {
      this.dialogVisible = false;
      this.$emit("closeArea", { statu: false, type: "cancel" });
    },

    /*确认并关闭弹窗*/
    confirmArea() {
      console.log(this.activeList);
      this.activeList.forEach((item) => {
        let p_id = item[0];
        let c_id = item[1];
        //如果this.provinceList里有这个省，则添加到children中
        if (this.provinceList.some((item) => item.value == p_id)) {
          this.provinceList.some((item) => {
            if (item.value == p_id) {
              item.children.push({
                id: c_id,
                value: c_id,
                label: item.name,
              });
            }
          });
        } else {
          this.provinceList.push({
            id: p_id,
            value: p_id,
            label: item.name,
            children: [
              {
                id: c_id,
                value: c_id,
                label: item.name,
              },
            ],
          });
        }
      });
      this.dialogVisible = false;
      let obj = {
        statu: false,
        type: "confirm",
        this_area: this.provinceList,
        total_area: [],
      };
      this.$emit("closeArea", obj);
    },
  },
};
</script>

<style>
.area-dialog .el-dialog__header {
  border-bottom: 1px solid #dddddd;
}
.area-dialog .el-dialog__body {
  padding: 20px;
}
.area-dialog .modal-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.area-dialog .scroll-box {
  overflow-y: auto;
}
.area-dialog .address-item {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  border: 1px solid #eee;
  height: 400px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.area-dialog .el-checkbox {
  padding: 8px 10px 8px 22px;
  min-height: 20px;
  box-sizing: border-box;
  margin-right: 0;
  position: relative;
}
.area-dialog .province-item {
  cursor: pointer;
}
.area-dialog .province-item:hover,
.area-dialog .province-item.curr {
  background: #eeeeee;
}
/* .area-dialog .address-item .el-checkbox {
  display: block;
  margin-right: 0;
}

.area-dialog .address-item .el-checkbox-item:hover,
.area-dialog .address-item .active-checkbox {
  background: #eeeeee;
}
.area-dialog .address-item .el-checkbox__input {
  position: absolute;
  left: 10px;
  top: 10px;
}
.area-dialog .address-item .el-checkbox__label {
  display: block;
} */
.el-cascader-menu__wrap.el-scrollbar__wrap {
  height: 500px;
}
.dialog-footer {
  margin-top: 10px;
}
</style>
